import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Button, Empty, Card } from 'react-vant';
import { Success, ArrowLeft } from '@react-vant/icons';
import './style/PaymentSuccess.css';

interface OrderItem {
  id: number;
  title: string;
  price: number;
  num: number;
  image: string;
}

const PaymentSuccess: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const orderItems = location.state?.orderItems as OrderItem[] || [];

  const totalAmount = orderItems.reduce((total, item) => {
    return total + item.price * item.num;
  }, 0);

  return (
    <div className="payment-success">
      <div className="navigator">
        <ArrowLeft style={{ marginTop: '28px' }} onClick={() => navigate('/app/show')} />
        <p>支付成功</p>
      </div>

      <div className="success-content">
        <div className="success-icon">
          <Success color="#07c160" size={48} />
        </div>
        <h2>支付成功</h2>
        <p className="success-message">感谢您的购买！</p>

        <Card className="order-details">
          <h3>订单详情</h3>
          {orderItems.length > 0 ? (
            <>
              {orderItems.map((item, index) => (
                <div key={index} className="order-item">
                  <img src={item.image} alt={item.title} className="item-image" />
                  <div className="item-info">
                    <p className="item-title">{item.title}</p>
                    <p className="item-price">¥{(item.price / 10).toFixed(2)} × {item.num}</p>
                  </div>
                </div>
              ))}
              <div className="total-amount">
                <span>总计：</span>
                <span className="amount">¥{(totalAmount / 10).toFixed(2)}</span>
              </div>
            </>
          ) : (
            <Empty description="暂无订单信息" />
          )}
        </Card>

        <div className="action-buttons">
          <Button 
            type="primary" 
            block 
            onClick={() => navigate('/app/show')}
          >
            返回首页
          </Button>
          <Button 
            plain 
            block 
            onClick={() => navigate('/order')}
            style={{ marginTop: '12px' }}
          >
            查看订单
          </Button>
        </div>
      </div>
    </div>
  );
};

export default PaymentSuccess; 